<template>
  <div class="page">
    <div class="line1"></div>
     
     <div class="top">
      <div id="" class="text-l">
        <div style="font-size:20px;"><span style="color:#FFFFFF;">重点监控指标</span></div>
        <div style="font-size:14px;"><span style="color:rgba(255, 255, 255, 0.298039215686275);">Key monitoring indicators</span></div>
      </div>
      <div class="chars-box">
        <div class="item-three">
          <div class="item-chars" >
                <dv-charts :option="option1" id="mychart1" />
          </div>  
          <div class="bottom-text">
            
            流域安全指数</div> 
        </div>

        <section class='item-three'>
          <div class="item-chars" >
                <dv-charts :option="option2" id="mychart2" />
          </div>  
          <div class="bottom-text">边坡安全指数</div>
        </section>
        <section class='item-three'>
          <div class="item-chars" >
                <dv-charts :option="option3" id="mychart3" />
          </div>  
          <div class="bottom-text">设备在线指数</div>
        </section>
      </div>
    </div> 
    <div class="line2"></div>
    <div class="down">
      <div id="" class="text-l">
          <div style="font-size:16px;"><span class="font-color">流域安全分析</span></div> 
          <div class="lab-box">
             <div style="font-size:14px;"><span class="left font-color">24小时流域安全指标情况</span></div> 
             <div style="font-size:14px;">
              <span class="right font-color lab " v-bind:class="{ active:  active==3  }" @click="clickLab(3)">本月</span>
              <span class="right font-color lab"  v-bind:class="{ active:  active==2  }" @click="clickLab(2)">本周</span>
              <span class="right font-color lab"  v-bind:class="{ active:  active==1  }" @click="clickLab(1)">今天</span>
            </div> 
          </div>
      </div>
      <div id="" class="text-l charts-box2" >
          <div style="font-size:18px;"><span class="font-color">流域安全风险系数</span></div> 
      </div> 
      <div class="item-chars-box">
          <div class="left box-left" style="font-size: 10px;">安全</div>
          <div class="item-chars-down">
            <dv-percent-pond :config="configper" style="width:21rem;height:2rem;" />
          </div>
          <div class="right box-left" style="font-size: 10px;">危险</div>
      </div>
      
      <div  class="scroll-box">
        <div class="item-chars-down">
            <dv-scroll-ranking-board :config=configscroll1 style="width:26rem;height:3rem" />
            <dv-scroll-ranking-board :config=configscroll2 style="width:26rem;height:3rem" />
            <dv-scroll-ranking-board :config=configscroll3 style="width:26rem;height:3rem" />
        </div>
      </div>
    </div>
    <div class="line3"></div>
      <div id="" class="text-l">
      <div style="font-size:20px;"><span style="color:#FFFFFF;">流域雷达实况</span></div>
      <div style="font-size:14px;"><span style="color:rgba(255, 255, 255, 0.298039215686275);">24小时流域内流速、阻碍物趋势</span></div>
    </div>
  </div>
 
</template>
   
    <script>
    
    import { ref, onMounted } from 'vue'
    import Charts from '@jiaminghi/charts'
    export default {
      data () {
        return {
          isReload:true,
          option1:{},
          option2:{},
          option3:{},
          option4:{},
          active:3
        }
      },
      setup() {
        const root = ref(null)
        const configper = initChart4()
        //下方折线图的实例
        const configscroll1 = initChart5()
        const configscroll2 = initChart6()
        const configscroll3 = initChart7()

        function initChart1() {
          const option1 = {
            series: [
              {
                type: 'gauge',
                startAngle: -Math.PI / 2,
                endAngle: Math.PI * 1.5,
                arcLineWidth: 10,
                data: [
                  { name: 'itemA', value: 90 ,gradient: ['#0fc779', '#0fc779', '#0fc779']}
                ],
                axisLabel: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                pointer: {
                  show: false
                },
                dataItemStyle: {
                  lineCap: 'round'
                },
                backgroundArc: {
                  style: {
                      stroke: "#118878"
                  }
                },
                details: {
                  show: true,
                  formatter: '{value}%',
                  style: {
                      fill: '#fff',
                      fontSize: 20
                  }
                }
              }
            ]
          }
          return option1
        }
        function initChart2() {
          const option2 = {
            series: [
              {
                type: 'gauge',
                startAngle: -Math.PI / 2,
                endAngle: Math.PI * 1.5,
                arcLineWidth: 10,
                data: [
                  { name: 'itemA', value: 75, gradient: ['#1ac9ff', '#1ac9ff', '#1ac9ff'] }
                ],
                axisLabel: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                pointer: {
                  show: false
                },
                dataItemStyle: {
                  lineCap: 'round'
                },
                backgroundArc: {
                    style: { 
                        stroke: "#28919d"
                    }
                },
                details: {
                  show: true,
                  formatter: '{value}%',
                  style: {
                      fill: '#fff',
                      fontSize: 20
                  }
                }
              }
            ]
          }
          return option2
        }
        function initChart3() {
          const option3 = {
            series: [
              {
                type: 'gauge',
                startAngle: -Math.PI / 2,
                endAngle: Math.PI * 1.5,
                arcLineWidth: 10,
                data: [
                  { name: 'itemA', value: 50 ,gradient: ['#ffbf2f', '#ffbf2f'] }
                ],
                axisLabel: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                pointer: {
                  show: false
                },
                dataItemStyle: {
                  lineCap: 'round'
                },
                backgroundArc: {
                      style: { 
                          stroke: "#5f8f73"
                      }
                },
                details: {
                  show: true,
                  formatter: '{value}%',
                  style: {
                    fill: '#fff',
                        fontSize: 20
                  }
                }
              }
            ]
          }
          return option3
        }
        function initChart4() {
          const option4 = {
            value: 30,
            lineDash:[5,3],
            localGradient:true,
            colors:['#19C4F8'],
            borderWidth: 1,
            borderRadius: 2,
            textColor:'#FFFFFF'
          }
          return option4
        }
        function initChart5() {
          const option5 = {
            data:[
              {
                name:'all',
                value:100
              },
              {
                name: '平均流速',
                value: 90
              }
            ],
            unit:'  Km/h',
            color:'rgba(17, 228, 138, 1)'
            }
          return option5
        }
        function initChart6() {
          const option6 = {
            data:[
              {
                name:'all',
                value:150
              },
              {
                name: '平均阻碍物数',
                value: 30
              }
            ],
            unit:'个'
          }
          return option6
        }
        function initChart7() {
          const option7 = {
            data:[
              {
                name:'all',
                value:100
              },
              {
                name: '平均阻碍物尺寸',
                value: 80
              }
            ],

            }
          return option7
        }
        function clickLab (active) {
          this.active = active;
        }

        // mounted
        onMounted(() => {
          //左侧仪表盘123的实例
          const container = document.getElementById('mychart1')
          const myChart = new Charts(container)
          myChart.setOption(initChart1())

          const container2 = document.getElementById('mychart2')
          const myChart2 = new Charts(container2)
          myChart2.setOption(initChart2())

          const container3 = document.getElementById('mychart3')
          const myChart3 = new Charts(container3)
          myChart3.setOption(initChart3())

        }
      )
        return {
            root,
            clickLab,
            configper,
            configscroll1,
            configscroll2,
            configscroll3
          }
      }
     }
    </script>

  <style>

  .page{
    height: 100%;
  }
  .top {
    width: 100%;
    height: 30%;
    position:relative;
    margin: 0 auto;
    padding: 1.2rem 0.2rem 2.5rem 1.2rem;
  }
  .font-color{
    color:#D0E3E4;
  }
  .left{
    float: left;
  }
  .right{
    float: right;
  }
  .down {
    width: 100%;
    height: 59%;
    position:relative;
    margin: 0 auto;
    padding: 0.5rem 0.2rem;
  }
  .line1{  
    position: relative;  
    height: 1px ;
    top: 0.6rem;  
    background-image: linear-gradient(to bottom,transparent,#ccc,transparent); 

  }
  .line2{  
      position: relative;  
      height: 2px ;
      top: 4px;  
      background-image: linear-gradient(to bottom,transparent,#ccc,transparent); 

  }
  .line3{  
      position: relative;  
      height: 2px ;
      top: -10px;  
      background-image: linear-gradient(to bottom,transparent,#ccc,transparent); 
    
  }
  .text-l {
    border-width:0px;
    font-family:'微软雅黑', sans-serif;
    font-weight:400;
    font-style:normal;
    text-align:left;
    line-height:32px;
    position: relative;
    padding: 0 0.2rem;
  }
  .chars-box{
    display: flex; 
    width: 100%;
    height: 55%;
    position:relative;
    margin: 0 auto;
    padding: 0.5rem 0.2rem;
  }
  .item-three{
    width:28%;
    display: block; 
    position: relative;
  }
  .item-chars{
    flex: 3;
    display: block; 
    height: 9.2rem;
    width: 9.2rem;
    top:-10.5rem;
    left:-1rem;
    position: absolute;
  }
  .top-img{
    height: 80%;
  }
  .bottom-text{
    justify-content: center;
    align-items: center;
    position: absolute;
    top:7.0rem;
    left:0.5rem;
  }
  .active{
    border: 0.06rem solid #7BBCEE;
  }
  .lab{
    padding: 0 1rem;
  }
  .charts-box2{
    display: inline-block;
    padding-top: 2rem;
  }
  .item-chars-box{
    position: relative;
    display: flex;
  }
  .item-chars-down{
    display: block; 
    top:1rem;
    left:-1rem;
    padding: 1rem;
    text-align: center;
    width: 75%;
  }
  .box-left{
    width:8%;
    line-height: 4rem;
  }
  .scroll-box{
    width: 100%;
    height: 10rem;
    padding: 1px;
    margin-top: 0.5rem;
  }
  .row-item{
    height: 16.6px;
    padding: 13px 0 5px 0;
  }
  .rank{
    display: none;
  }
  .info-name{
    text-align: left;
  }
  .dv-scroll-ranking-board .row-item:first-child{
    display: none;
  }
  .dv-scroll-ranking-board .ranking-column .inside-column{
    background-color: #11E48A !important;
  }
  .dv-scroll-ranking-board .ranking-column{
    border-bottom: 2px solid rgba(240, 117, 86, 0.5);
    background: inherit;
    background-color: rgba(255, 255, 255, 0.2);
  }
  .ranking-value{
    font-size: 16px;
    color:#11E48A
  }
  .info-name{
    font-size: 16px;
  }
</style>